<template>
    <div>
      <div id="map" class="mapC"></div>
      <div class="eventC">
        <el-select @change="selectChange" v-model="optionData" placeholder="请选择数据！">
          <el-option
            v-for="item in option"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </div>
    </div>
</template>

<script>
import 'ol/ol.css'
import Draw from 'ol/interaction/Draw'
import Map from 'ol/Map'
import View from 'ol/View'
import {Vector as VectorSource, XYZ} from 'ol/source'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import {FullScreen, defaults as defaultControls} from 'ol/control'
// import * as olInteraction from 'ol/interaction'
export default {
  name: 'index',
  data () {
    return {
      map: null,
      vector: null,
      draw: null,
      optionData: '',
      pan: null,
      source: null,
      raset: null,
      raset1: null,
      option: [
        {
          label: 'LineString',
          value: 'LineString'
        },
        {
          label: 'Polygon',
          value: 'Polygon'
        },
        {
          label: 'Circle',
          value: 'Circle'
        },
        {
          label: 'None',
          value: 'None'
        }
      ]
    }
  },
  mounted () {
    this.initMap()
    this.addInteraction()
  },
  methods: {
    selectChange () {
      this.map.removeInteraction(this.draw)
      this.addInteraction()
    },
    initMap () {
      this.source = new VectorSource({wrapX: false})
      this.vector = new VectorLayer({
        source: this.source
      })
      this.raset = new TileLayer({
        name: 'map',
        title: 'map',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        })
      })
      this.raset1 = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        })
      })
      this.map = new Map({
        controls: defaultControls().extend([new FullScreen()]),
        layers: [this.raset, this.raset1, this.vector],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 4
          // projection: 'EPSG: 4326'
        })
      })
    },
    addInteraction () {
      if (this.optionData !== 'None') {
        this.draw = new Draw({
          source: this.source,
          type: this.optionData
        })
        this.map.addInteraction(this.draw)
      }
    }
  }
}
</script>

<style scoped>

</style>
